<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>XRay - Responsive Bootstrap 4 Admin Dashboard Template</title>
  <!-- Favicon -->
  <link rel="shortcut icon" th:href="@{/xray/images/favicon.ico}" />
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" th:href="@{/xray/css/bootstrap.min.css}">
  <!-- Typography CSS -->
  <link rel="stylesheet" th:href="@{/xray/css/typography.css}">
  <!-- Style CSS -->
  <link rel="stylesheet" th:href="@{/xray/css/style.css}">
  <!-- Responsive CSS -->
  <link rel="stylesheet" th:href="@{/xray/css/responsive.css}">

  <style>
    .my-mouse-img {
      position: absolute;
      z-index: 999;
    }
  </style>
</head>
<body>
<img class="my-mouse-img" src="imgs/mouse-logo.jpg" alt="" width="60px">
<script>
  document.addEventListener('mousemove', function (e) {
    //鼠标只要移动,就会触发事件
    var x = e.pageX;
    var y = e.pageY;
    var pic = document.querySelector('img');
    pic.style.left = x-20+'px';
    pic.style.top = y-40+'px';
  })
</script>

<!-- loader Start -->
<div id="loading">
  <div id="loading-center">
  </div>
</div>
<!-- loader END -->
<!-- Sign in Start -->
<section class="sign-in-page">
  <div class="container sign-in-page-bg mt-5 p-0">
    <div class="row no-gutters">
      <div class="col-md-6 text-center">
        <div class="sign-in-detail text-white">
          <a class="sign-in-logo mb-5" href="#"><img th:src="@{/xray/images/logo-white.png}" class="img-fluid"></a>
          <div class="owl-carousel" data-autoplay="true" data-loop="true" data-nav="false" data-dots="true" data-items="1" data-items-laptop="1" data-items-tab="1" data-items-mobile="1" data-items-mobile-sm="1" data-margin="0">
            <div class="item">
              <img th:src="@{/xray/images/login/1.png}" class="img-fluid mb-4" alt="logo">
              <h4 class="mb-1 text-white">欢迎登陆</h4>
              <p>欢迎来到教育局民办教育信息服务监督平台</p>
            </div>
            <div class="item">
              <img th:src="@{/xray/images/login/2.png}" class="img-fluid mb-4" alt="logo">
              <h4 class="mb-1 text-white">欢迎登陆</h4>
              <p>欢迎来到教育局民办教育信息服务监督平台</p>
            </div>
            <div class="item">
              <img th:src="@{/xray/images/login/3.png}" class="img-fluid mb-4" alt="logo">
              <h4 class="mb-1 text-white">欢迎登陆</h4>
              <p>欢迎来到教育局民办教育信息服务监督平台</p>
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-6 position-relative">
        <div class="sign-in-from">
          <h1 class="mb-0">找回密码</h1>
          <p>请输入您的用户名</p>
          <form class="mt-4" th:action="@{/forgetPassword}">
            <div class="form-group">
              <label >用户名</label>
              <input type="text" class="form-control mb-0" name="username" placeholder="请输入用户名">
            </div>
            <div style="height: 50px"></div>
            <div class="d-inline-block w-100">
              <button type="submit" class="btn btn-primary float-right">找回密码</button>
            </div>
            <div style="height: 50px"></div>
            <div class="sign-info">
              <span class="dark-color d-inline-block line-height-2">没有帐户？<a href="/signup">注册</a></span>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</section>
<!-- Sign in END -->
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script th:src="@{/xray/js/jquery.min.js}"></script>
<script th:src="@{/xray/js/popper.min.js}"></script>
<script th:src="@{/xray/js/bootstrap.min.js}"></script>
<!-- Appear JavaScript -->
<script th:src="@{/xray/js/jquery.appear.js}"></script>
<!-- Countdown JavaScript -->
<script th:src="@{/xray/js/countdown.min.js}"></script>
<!-- Counterup JavaScript -->
<script th:src="@{/xray/js/waypoints.min.js}"></script>
<script th:src="@{/xray/js/jquery.counterup.min.js}"></script>
<!-- Wow JavaScript -->
<script th:src="@{/xray/js/wow.min.js}"></script>
<!-- Apexcharts JavaScript -->
<script th:src="@{/xray/js/apexcharts.js}"></script>
<!-- Slick JavaScript -->
<script th:src="@{/xray/js/slick.min.js}"></script>
<!-- Select2 JavaScript -->
<script th:src="@{/xray/js/select2.min.js}"></script>
<!-- Owl Carousel JavaScript -->
<script th:src="@{/xray/js/owl.carousel.min.js}"></script>
<!-- Magnific Popup JavaScript -->
<script th:src="@{/xray/js/jquery.magnific-popup.min.js}"></script>
<!-- Smooth Scrollbar JavaScript -->
<script th:src="@{/xray/js/smooth-scrollbar.js}"></script>
<!-- Chart Custom JavaScript -->
<script th:src="@{/xray/js/chart-custom.js}"></script>
<!-- Custom JavaScript -->
<script th:src="@{/xray/js/custom.js}"></script>
</body>
</html>